<template>
  <div id="" class="container">
    <header class="header">
      <img src="../../../assets/img/home/logo.png" alt="">
    </header>
    <div class="content clearfix">
      <div class="userInfo">
        <span class="userItem"><img src="../../../assets/img/home/yonghu.png" alt="">{{this.user.userName}}</span><span class="line"></span>
        <span @click="clear"><span class="userItem"><img src="../../../assets/img/home/tuichu.png" alt="" >退出</span></span>
      </div>
      <div class="navWrapper">
        <div class="topNav">
          <div style="width: 1050px;margin:0px 20px;">
            <Slider
              animation="fade"
              v-model="sliderValue"
              :duration="5000"
              :speed="1000"
              style="height: 452px"
            >
              <SliderItem
                v-for="(i, index) in list"
                :key="index"
                @click="changeIndex(1);"
                :style="i"
              >
                <div class="img-k" :style='"background-image:url("+i.img+")"'></div>

              </SliderItem>
            </Slider>
          </div>
          <div class="middle navItem" :class="{'collDisabled' : isResource}" @click="goToRouter('/resource')">
            <img src="../../../assets/img/home/linmu.png" alt="" style="object-fit: fill">
            <p>种质资源管理</p>
          </div>
        </div>
        <div class="bottomNav">
          <div class="bottomItem navItem" :class="{'listDisabled' : item.listDisabled}" v-for="(item,index) in bottomNav" :key="index" @click="goToRouter(item.path)">
            <img :src="item.url" alt="" style="max-width: 100%;">
            <p>{{item.text}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <span class="text">版权：广西壮族自治区林业科学研究院</span>
    </div>
    <Loding v-if="isShowLoading" text="正在进入"></Loding>
  </div>
</template>

<script>
import roleApi from '@/api/roleApi'
import menuApi from '@/api/menuApi'
import Loding from '../../../components/Loding'
import { Slider, SliderItem } from "vue-easy-slider";
export default {
  name: 'home',
  components: {
    Loding,
    Slider,
    SliderItem
  },
  data () {
    return {
      isGeography: false,
      isBigData: false,
      isResource: false,
      bottomNav: [
        {url: require('../../../assets/img/home/linqu.png'), text: '样地调查', path: '/investigation', listDisabled: false},
        {url: require('../../../assets/img/home/wulian.png'), text: '物联网智能感知', path: '/intelligence', listDisabled: false},
        {url: require('../../../assets/img/home/shibie.png'), text: '动物识别', path: '/distinguish', listDisabled: false},
        {url: require('../../../assets/img/home/shehzi.png'), text: '系统管理', path: '/system', listDisabled: false}
      ],
      menuData: [],
      menuPath: [],
      isShowLoading: false,
      user: {},
      list: [
        {
          backgroundColor: "#3f51b5",
          width: "100%",
          height: "100%",
          img:require('../../../assets/img/home/img1.jpg')
        },
        {
          backgroundColor: "#eee",
          width: "100%",
          height: "100%",
          img:require('../../../assets/img/home/img2.jpg')
        },
        {
          backgroundColor: "#f44336",
          width: "100%",
          height: "100%",
          img:require('../../../assets/img/home/img3.jpg')
        },

      ],
      sliderValue: 2
    }
  },
  created () {
    this.user = JSON.parse(localStorage.getItem('user'))
    this.findMenu()
  },
  methods: {
    isDisabled (data) {
      if (data) {
        this.bottomNav.forEach(item => {
          if (!data.includes(item.path)) {
            this.$set(item, 'listDisabled', true)
          }
        })
        if (!data.includes('/geography')) {
          this.isGeography = true
        }
        if (!data.includes('/bigData')) {
          this.isBigData = true
        }
        if (!data.includes('/resource')) {
          this.isResource = true
        }
      }
    },
    findMenu () {
      menuApi.findMenuList().then(res => {
        if (res.data.message === 'success') {
          let result = res.data.result
          this.menuData = result
          if (result) {
            result.forEach(item => {
              this.menuPath.push(item.path)
              this.$set(this.menuData, item.path, item)
            })
          }
        }
      })
    },
    goToRouter (path) {
      this.isShowLoading = true
      if (this.menuPath.indexOf(path) > -1) {
        let menu = this.menuData[path]
        if (menu) {
          let children = menu.children
          if (children && children.length > 0) {
            this.$router.push(children[0].path)
            localStorage.setItem('navItemIndex', 0)
          } else {
            this.$router.push(path)
          }
          localStorage.setItem('headerMenu', JSON.stringify(children))
        }
      } else {
        this.isShowLoading = false
        this.$message('暂无权限')
      }
    },
    clear () {
      window.localStorage.clear()
      this.$router.push({path: '/'})
    }
  }
}
</script>

<style lang="less" scoped>
  .listDisabled{
    background: rgba(0, 236, 247, .3) !important;
    &:hover {
      background: rgba(0, 236, 247, .3);
      box-shadow: 0 0 20px rgba(0.3, 236, 247, 1);
      transform: scale(1.1);
      -ms-transform: scale(1.1); /* IE 9 */
      -moz-transform: scale(1.1); /* Firefox */
      -webkit-transform: scale(1.1); /* Safari 和 Chrome */
      -o-transform: scale(1.1);
    }
  }
  .collDisabled{
    background: rgba(0, 236, 247, .3) !important;
    &:hover {
      box-shadow: 0 0 20px rgba(0.3, 236, 247, 1);
      transform: scale(1.1);
      -ms-transform: scale(1.1); /* IE 9 */
      -moz-transform: scale(1.1); /* Firefox */
      -webkit-transform: scale(1.1); /* Safari 和 Chrome */
      -o-transform: scale(1.1);
      background: rgba(0, 236, 247, .3)
    }
  }
  .container{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: url("../../../assets/img/home/daohang2.png");
    background-size: cover;
    position: relative;
  }
  .header{
    width:100%;
    height: 122px;
    .img{
      height: 122px;
    }
  }
  .content{

  }
  .line {
    display: inline-flex;
    height: 21px;
    width: 1px;
    background: rgba(0, 255, 255, 1);
    margin: 0 10px;
    vertical-align: middle;
  }
  .userInfo{
    margin-top: 15px;
    text-align: right;
    padding-right: 13.5%;
    font-size: 1.6rem;
    color:rgba(0,255,255,1);
    min-width: 1250px;
    .userItem{
      cursor: pointer;
    }
    img{
      height: 18px;
      vertical-align: text-bottom;
      margin-right: 10px;
    }
  }
  .navWrapper{
    padding: 0 12%;
    margin-top: 25px;
    font-size: 1.8rem;
    .navItem{
      cursor: pointer;
      font-size: 2rem;
      color: #ffffff;
      background:rgba(255,255,255,0);
      border:1px solid rgba(0,236,247,1);
      border-image: url("../../../assets/img/home/1.png");
      border-image-slice: 27;
      border-image-width: 27px;
      border-image-repeat: repeat;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all .5s;
      -webkit-transition: all .5s; /* Safari */
      img{
        margin-bottom: 10px;
      }
      &:hover{
        background:rgba(0,0, 0, .1);
        box-shadow:  0 0 20px rgba(0.3,236,247,1);
        transform: scale(.99);
        /*-ms-transform:scale(1.1);     !* IE 9 *!*/
        /*-moz-transform:scale(1.1);     !* Firefox *!*/
        /*-webkit-transform:scale(1.1); !* Safari 和 Chrome *!*/
        /*-o-transform:scale(1.1);*/
      }
    }
    .topNav{
      width: 100%;
      display: flex;
      flex-direction: row;
      .bigNav{
        min-width: 583px;
        width: 47.5%;
        height: 450px;
        margin-right: 1%;
        margin-left: 1.5%;
      }
      .middle{
        margin-right: 1%;
        width: 23.2%;
        height: 450px;
        min-width: 285px;
      }
      .rightNav{
        min-width: 285px;
        width: 23.2%;
        height: 450px;
      }
      .rightBottom{
        width: 100%;
        min-width: 285px;
        height: 220px;
      }
      .rightTop{
        width: 100%;
        height: 220px;
        margin-bottom: 8px;
        min-width: 285px;
      }
    }
    .bottomNav{
      display: flex;
      flex-direction: row;
      margin-left: 1.5%;
      margin-right: 2%;
      margin-top: 20px;
      height: 226px;
      .bottomItem{
        min-width: 285px;
        height: 100%;
        width: 24%;
        margin-right: 1.1%;
        &:last-child{
          margin-right: 0;
        }
      }
    }
  }
  .footer{
    margin-top: 25px;
    text-align: center;
    color: white;
    img{
      display: inline-block;
      width:29px;
      height:24px;
      vertical-align: middle;
    }
  }
  .img-k{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
  }
</style>
